<template>
  <!--学习社区-->
  <div id="learningCommunity">
    <div style="color: red;font-size: 16px" v-if="userType==0">温馨提示：
      <div style="text-indent: 2em;">依据《南京市环境教育促进办法》要求，市环境保护主管部门确定的重点排污单位，其单位负责人和环境保护管理人员应当定期接受由市环境保护主管部门组织的环境教育培训，每年不少于八个学时。</div>
      <div style="text-indent: 2em;">因环境违法行为被环境保护主管部门依法实施行政处罚的企业、事业单位，其单位负责人及相关责任人员应当在九十日内，持有效身份证件到指定地点或者登录市环境保护主管部门设置的远程教育网站，接受不少于十六个学时的环境警示教育培训。</div>
    </div>
    <div class="curriculum-c">
      <!--课程列表-->
      <div class="curriculum-top">
        <img src="@/assets/images/home/curriculum.png" alt="">
        <span>推荐课程</span>
        <div></div>
      </div>
      <!--课程列表-->
      <div class="curriculum-cc" @click="toPath(item1.id)" v-for="(item1,index1) in childList" :key="index1" :style="{marginRight:(index1+1)%5==0?'0':'20px'}">
        <img src="@/assets/images/home/tu1.png" alt="" v-if="item1.fileUrl == null">
        <img :src="$store.state.prefixImg + item1.fileUrl" alt="" v-else>
        <div class="curriculum-tit ccsl">{{item1.courseName}}</div>
        <div class="curriculum-bottom">
          <div class="jifen">
            <img src="@/assets/images/home/integral.png" alt="">
            <span>{{item1.integral}}积分</span>
          </div>
          <div class="llrs">
            <img src="@/assets/images/home/renshu.png" alt="">
            <span>{{item1.pageViews}}</span>
          </div>
          <span class="keshi">{{item1.period}}课时</span>
          <span class="shijian1">{{item1.uploadTime}}</span>
          <div class="btn">立即观看</div>
        </div>
      </div>
      <!--分页器-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-size="20"
        layout="total, prev, pager, next"
        :total="pagination.total"
        prev-text="上一页"
        next-text="下一页">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import {queryCourseList} from '@/request/api'
  export default {
    data() {
      return {
        childList:[],
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
        userType: ''
      }
    },
    created() {
        this.userType = JSON.parse(localStorage.getItem('userInfo')).userType
        this.getList()
    },
    methods: {
      getList() {
        const loading = this.openLoading();
        const parameter = {
          _search: true,
          "bgTm": "",
          "courseName": '',
          "courseType": '',
          "endTm": "",
          pageSize: 20,
          pageNumber: this.pagination.currentPage || 1,
          type: 0,//上下架状态
        }
        queryCourseList(parameter).then(res=> {
          if(res.code == 200) {
            this.childList = res.data.records
            if(this.childList.length!=0) {
              this.childList.forEach(e=>{
                e.uploadTime = e.uploadTime.split(' ')[0]
              })
            }else {
              this.$message({
                message: '暂无课程',
                type: 'warning',
                offset: '500'
              });
            }
            this.pagination.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      //      去详情
      toPath(id) {
        this.$router.push({
          name:'seriesInfo',
          params: {
            id: id
          }
        })
      },
//      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
//        console.log(`当前页: ${val}`);
        this.getList()
      }
    }
  }
</script>
<style scoped="">
  #learningCommunity {
    padding-top: 20px;
  }
  .curriculum-top {
    border-bottom: 1px solid #ccc;
    font-weight: 700;
    font-size: 20px;
    height: 42px;
    line-height: 34px;
    padding-left: 44px;
    position: relative;
    color: #343434;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .curriculum-top img {
    position: absolute;
    left: 0;
    top:2px;
  }
  .curriculum-top :nth-child(3) {
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 140px;
    height: 2px;
    background: #22944E;
  }
  /*.curriculum-top{*/
    /*border-bottom: 1px solid #ccc;*/
    /*font-weight: 700;*/
    /*font-size: 20px;*/
    /*height: 30px;*/
    /*line-height: 40px;*/
    /*margin: 20px 0;*/
  /*}*/
  /*.curriculum-cc {*/
    /*width: 100%;*/
    /*padding: 10px 0;*/
    /*margin-bottom: 20px;*/
  /*}*/
  /*.curriculum-cc img {*/
    /*width: 100%;*/
    /*height: 120px;*/
  /*}*/
  /*.curriculum-tit {*/
    /*font-size: 20px;*/
  /*}*/
  /*.curriculum-bottom {*/
    /*font-size: 16px;*/
    /*color: #8a8a8a;*/
  /*}*/
  /*.curriculum-bottom img {*/
    /*width: 15px;*/
    /*height: 15px;*/
  /*}*/
</style>
